<script setup>
import { ref, computed } from 'vue'
import { cartList as dataList } from '@/pages/cart/data'
import CartItem from '@/components/CartItem.vue'
import RefreshLoading from '@/components/RefreshLoading.vue'
import CustomLoading from '@/components/CustomLoading.vue'
import PrimaryButton from '@/components/PrimaryButton.vue'
import CustomAmount from '@/components/CustomAmount.vue'
import NoMore from '@/components/NoMore.vue'

// 获取z-paging插件实例
const paging = ref()
// 购物车列表数据
const cartList = ref([])

// 初始化购物车列表
const initList = (page, pageSize) => {
  setTimeout(() => {
    // 深拷贝数据以避免直接修改原始数据
    cartList.value = JSON.parse(JSON.stringify(dataList))
    cartList.value.forEach(shop => {
      shop.shopIsChecked = false
      shop.goodsList.forEach(goods => {
        goods.goodsIsChecked = false
      })
    })
    paging.value.complete(cartList.value)
  }, 1000)
}

// 是否在正在刷新状态
const isLoading = ref(false)

// 刷新列表
const onRefresh = async () => {
  await paging.value.refresh()
  isLoading.value = false
}

// 判断是否全选商品
const isAllSelected = computed({
  get: () => {
    return cartList.value.every(shop => shop.shopIsChecked)
  },
  set: (value) => {
    cartList.value.forEach(shop => {
      shop.shopIsChecked = value
    })
  }
})

// 选中的商品列表
const checkedGoodsList = computed(() => {
  return cartList.value.reduce((tempList, shop) => {
    return tempList.concat(shop.goodsList.filter(goods => goods.goodsIsChecked))
  }, [])
})

// 计算总价格
const totalPrice = computed(() => {
  return checkedGoodsList.value.reduce((total, goods) => total + goods.currentPrice * goods.num, 0)
})

// 计算总件数
const totalNum = computed(() => {
  return checkedGoodsList.value.reduce((total, goods) => total + goods.num, 0)
})

// 删除购物车商品
const handleDeleteGoods = (shopItem, goodsItem) => {
  // 店铺索引
  const shopIndex = cartList.value.findIndex(shop => shop.id === shopItem.id)

  // 删除商品
  const shop = cartList.value[shopIndex]
  if (shop) {
    shop.goodsList = shop.goodsList.filter(goods => goods.id !== goodsItem.id)

    // 如果店铺商品为空,则删除店铺
    if (shop.goodsList.length === 0) {
      cartList.value.splice(shopIndex, 1)
    }
  }
}
</script>

<template>
  <z-paging
    ref="paging"
    v-model="cartList"
    @query="initList"
    :refresher-enabled="false"
    :use-page-scroll="false"
    :loading-more-enabled="false"
  >
    <RefreshLoading
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <view class="cart-layout p-lr-20 p-t-20">
        <CartItem
          :cartList="cartList"
          @handleDeleteGoods="handleDeleteGoods"
        ></CartItem>
      </view>
    </RefreshLoading>
    <template #loadingMoreNoMore>
      <NoMore></NoMore>
    </template>
    <!-- 底部全选按钮以及总价 -->
    <template #bottom>
      <view class="bottom white-bgc flex-between p-30">
        <view class="flex align-center">
          <!-- 全选 -->
          <view class="m-r-15">
            <van-checkbox
              v-model="isAllSelected"
              icon-size="30rpx"
              checked-color="#1a1617"
            />
          </view>
          <text class="c-9 fs-24">全选</text>
        </view>
        <view class="flex-center">
          <text class="c-6 fs-24">合计：</text>
          <view class="f-col">
            <CustomAmount
              :price="totalPrice"
              :show-original-price="false"
            ></CustomAmount>
            <text
              v-show="totalNum"
              class="c-9 fs-20 m-t-5 tr"
            >
              已选 {{ totalNum }} 件
            </text>
          </view>
          <view class="m-l-20">
            <PrimaryButton
              text="结算"
              is-bold
              padding-t-b="15rpx"
              padding-l-r="60rpx"
            ></PrimaryButton>
          </view>
        </view>
      </view>
    </template>
  </z-paging>
</template>

<style scoped lang="scss"></style>